<template>
  <div class="ll-container">
    <el-card v-if="flag === 1">
      <div class="title text-center">登 录</div>
      <div class="content">
        <el-form
          :model="dataForm"
          label-position="right"
          :rules="fromRules"
          label-width="120px"
        >
          <el-form-item label="用户名:" class="color_withe" prop="username">
            <el-input
              placeholder="请输入手机号"
              v-model="dataForm.username"
            ></el-input>
          </el-form-item>
          <el-form-item label="密 码:" class="color_withe" prop="password">
            <el-input
              placeholder="请输入密码"
              v-model="dataForm.password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item style="text-align: right">
            <el-button style="width: 100%" type="primary" @click="login"
              >登 录</el-button
            >
          </el-form-item>
        </el-form>
        <div>
          <el-link
            type="primary"
            style="float: left"
            :underline="false"
            @click="handFlag(2)"
            >点击注册</el-link
          >
          <el-link
            type="primary"
            style="float: right"
            :underline="false"
            @click="handFlag(3)"
            >忘记密码?</el-link
          >
        </div>
      </div>
    </el-card>
    <el-card v-else-if="flag == 2">
      <div class="title text-center">注 册</div>
      <div class="content">
        <el-form
          :model="dataForm"
          :rules="fromRules"
          ref="ruleForm2"
          label-position="right"
          label-width="100px"
        >
          <el-form-item label="昵 称:" class="color_withe" prop="nickname">
            <el-input placeholder="昵称" v-model="dataForm.nickname"></el-input>
          </el-form-item>
          <el-form-item label="用户名:" class="color_withe" prop="username">
            <el-input
              placeholder="请输入手机号"
              v-model="dataForm.username"
            ></el-input>
          </el-form-item>
          <el-form-item label="密 码:" class="color_withe" prop="password">
            <el-input
              placeholder="请输入密码"
              v-model="dataForm.password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="确定密码:" class="color_withe" prop="repassword">
            <el-input
              placeholder="请输入密码"
              v-model="dataForm.repassword"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="验证码:" class="color_withe" prop="code">
            <el-input
              placeholder="请输入验证码"
              v-model="dataForm.code"
              style="width: 65%"
            ></el-input>
            <el-button
              style="float: right; width: 30%"
              v-show="show"
              @click="doVerify"
              type="primary"
              >获取验证码</el-button
            >
            <el-button style="float: right; width: 30%" v-show="!show" disabled
              >{{ count }}s</el-button
            >
          </el-form-item>
          <el-form-item style="text-align: right">
            <el-button style="width: 100%" type="primary" @click="register"
              >注 册</el-button
            >
          </el-form-item>
        </el-form>
        <div>
          <el-link
            type="primary"
            style="float: left"
            :underline="false"
            @click="handFlag(1)"
            >返回登录</el-link
          >
          <el-link
            type="primary"
            style="float: right"
            :underline="false"
            @click="handFlag(3)"
            >忘记密码?</el-link
          >
        </div>
      </div>
    </el-card>
    <el-card v-else-if="flag == 3">
      <div class="title text-center">重置密码</div>
      <div class="content">
        <el-form
          :model="dataForm"
          label-position="right"
          label-width="120px"
          ref="ruleForm3"
          :rules="fromRules"
        >
          <el-form-item label="用户名:" class="color_withe" prop="username">
            <el-input
              placeholder="请输入手机号"
              v-model="dataForm.username"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="新 密 码:"
            class="color_withe"
            prop="newpassword"
          >
            <el-input
              placeholder="请输入密码"
              v-model="dataForm.password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="确定密码:" class="color_withe" prop="repassword">
            <el-input
              placeholder="请确认密码"
              v-model="dataForm.repassword"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="验证码:" class="color_withe" prop="code">
            <el-input
              placeholder="请输入验证码"
              v-model="dataForm.code"
              style="width: 65%"
            ></el-input>
            <el-button
              style="float: right; width: 30%"
              v-show="show"
              @click="doVerify"
              type="primary"
              >获取验证码</el-button
            >
            <el-button style="float: right; width: 30%" v-show="!show" disabled
              >{{ count }}s</el-button
            >
          </el-form-item>
          <el-form-item style="text-align: right">
            <el-button style="width: 100%" type="primary" @click="repassword"
              >提 交</el-button
            >
          </el-form-item>
        </el-form>
        <div>
          <el-link
            type="primary"
            style="float: left"
            :underline="false"
            @click="handFlag(1)"
            >返回登录</el-link
          >
          <!-- <el-link type="primary" style="float:right" :underline="false" @click="handFlag(3)">忘记密码?</el-link> -->
        </div>
      </div>
    </el-card>
    <v-verify v-if="verify" @getCode="getCode"></v-verify>
  </div>
  <el-footer>
    <div class="text-center">
      <span>版权所有：xxxxxxxxxxxxx Copyright ©1995-2023</span>
      <a
        href="http://beian.miit.gov.cn/"
        target="_blank"
        style="margin-left: 40px; color: #709eef"
        >京ICP备xxxxxxxxx号-x</a
      >
    </div>
  </el-footer>
</template>
<script >
import slideVerify from "../components/slideVerify.vue";

export default {
  name: "Login",
  data() {
    return {
      fromUrl: "",
      verify: false,
      ispass: false,
      mobile: "",
      flag: 1,
      show: true,
      count: "",
      timer: null,
      uuid: "453839f0-f875-4aca-8fee-f7d26676e313",
      dataForm: {
        nickname: "",
        username: "",
        password: "",
        repassword: "",
        code: "",
      },
      fromRules: {
        nickname: [{ required: true, message: "昵称不能为空", trigger: "blur" }],
        username: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
        repassword: [{ validator: this.validateRePassWord, trigger: "blur" }],
        code: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
      }
    };
  },
  created() {},
  components: { "v-verify": slideVerify },
  computed: {},
  beforeMount() {},
  mounted() {
    // 有token直接跳 home
    if (window.sessionStorage.getItem("token")) {
      this.$router.push({ path: "/" });
    }
  },
  methods: {
    handFlag(flag) {
      this.dataForm.nickname = "";
      this.dataForm.username = "";
      this.dataForm.password = "";
      this.dataForm.repassword = "";
      this.dataForm.code = "";

      this.flag = flag;
    },
    validateRePassWord(rule, value, callback) {
      if (value === "") {
        callback(new Error("请输入确认密码"));
      } else if (value !== this.dataForm.password) {
        callback(new Error("两次密码不一致!"));
      } else {
        callback();
      }
    },
    // 登录
    login() {
      getFromUrl();
      this.$http.post("/Login/dologin", this.dataForm, (res) => {
        if (res && res.code === 0) {
          window.sessionStorage.setItem("token", res.data);
          this.$message({
            message: "登录成功!",
            type: "success",
            duration: 1500,
            "on-close": () => {
              if (this.fromUrl == '') {
                this.$router.push({ path: "/" })
              } else {
                window.location.href = this.fromUrl;
              }
            },
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    getFromUrl() {
      var url = window.location.href ;    //获取当前url
      var dz_url = url.split('#')[0];     //获取#/之前的字符串
      var cs = dz_url.split('?')[1];      //获取?之后的参数字符串
      var vars = cs.split('&');           //参数字符串分割为数组
      var cs={};
      for(var i=0;i<vars.length;i++){     //遍历数组，拿到json对象
        var pair = vars[i].split("=");
        if (pair[0] == "from") {
            token = pair[1];
            this.fromUrl = pair[1];       //这样就拿到了参数中的数
        }
      }
    },
    // 注册
    register() {
      this.dataForm.uuid = this.uuid;
      this.$http.post("/Login/register", this.dataForm, (res) => {
        if (res && res.code === 0) {
          this.$message({
            message: "注册成功",
            type: "success",
          });
          this.flag = 1;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 重置密码
    repassword() {
      this.dataForm.uuid = this.uuid;
      this.$http.post("/Login/repassword", this.dataForm, (res) => {
        if (res && res.code === 0) {
          this.$message({
            message: "重置成功",
            type: "success",
          });
          this.flag = 1;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 获取uuid
    getuuid() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";

      var uuid = s.join("");
      return uuid;
    },
    // 验证码
    doVerify() {
      if (this.verify == false) {
        this.verify = true;
      }
    },
    getCode(ispass) {
      if (ispass == true) {
        this.verify = false;
        this.ispass = ispass;
      }
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
      this.uuid = this.getuuid();
      if (this.flag === 3) {
        this.mobile = this.userPasswordForm.username
      } else {
        this.mobile = this.registerDataForm.username
      }
      this.$http.post(
        "/Login/sendsms",
        {
          mobile: this.mobile,
          uuid: this.uuid,
        },
        (data) => {
          if (data && data.code === 0) {
            return;
          }
        }
      );
    },
    // 验证码-end
  },
  watch: {}
};
</script>
<style scoped lang="scss">
.ll-container {
  display: flex;
  width: 100%;
  height: 1000px;
  background-image: url(../assets/bg.jpg);
}
.el-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  .title {
    color: #fff;
    line-height: 60px;
    font-size: 20px;
  }
}
</style>
<style>
.color_withe > .el-form-item__label {
  color: #fff;
}
</style>